<template>
  <div class="login">
    <div class="login_title"></div>
    <div class="loginBtn" @touchstart="loginBtn" :style="btnStyle"></div>
    <div class="login_read" @touchstart="readTouch"></div>
    <div class="login_gou" @touchstart="gouTouch">
      <div v-if="isRead" class="gou"></div>
    </div>
    <div v-if="readShou" class="readBg">
      <div class="read_title"></div>
      <div class="read_close" @touchstart="closeTouch"></div>
      <div class="read_content">
        <p class="read_word">
          在此特别提醒您（用户）在注册成为用户之前
          <br />请认真阅读本《用户声明》（以下简称“声明”），确保您充分理解本声明中各条款。
          <br />请您审慎阅读并选择接受或不接受本声明。您的注册、登录、使用等行为将视为对本声明的接受，并同意接受本声明各项条款的约束。
          <br />本声明约定长沙禾子教育科技有限公司（以下简称“禾子教育科技”）与用户之间关于“绘本侠”软件服务（以下简称“服务“）的权利义务。“用户”是指注册、登录、使用本服务的个人。本声明可由禾子教育科技随时更新，更新后的声明条款一旦公布即代替原来的声明条款，恕不再另行通知，用户可在绘本侠APP中查阅最新版声明条款。在修改声明条款后，如果用户不接受修改后的条款，请立即停止使用禾子教育科技提供的所有服务，用户继续使用服务将被视为接受修改后的声明。
          <br />一、账号注册
          <br />1、用户在使用本服务前需要注册一个“绘本侠”账号。“绘本侠”账号应当使用手机号码绑定注册，请用户使用尚未与“绘本侠”账号绑定的手机号码，以及未被服务根据本声明封禁的手机号码注册“绘本侠”账号。服务可以根据用户需求或产品需要对账号注册和绑定的方式进行变更，而无须事先通知用户。
          <br />2、“绘本侠”是“禾子教育科技”开发的一种APP产品，用户注册时应当授权“禾子教育科技”及使用其个人信息方可成功注册“绘本侠”账号。故用户完成注册即表明用户同意禾子教育科技提取、公开及使用用户的信息。
          <br />3、鉴于“绘本侠”账号的绑定注册方式，您同意服务在注册时将允许您的手机号码及手机设备识别码等信息用于注册。
          <br />4、在用户注册及使用本服务时，绘本侠需要搜集能识别用户身份的个人信息以便服务可以在必要时联系用户，或为用户提供更好的使用体验。绘本侠搜集的信息包括但不限于用户的姓名、地址、手机号码、性别、年龄；禾子教育科技同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束。
          <br />二、用户个人隐私信息保护
          <br />1、如果禾子教育科技发现或收到他人举报或投诉用户违反本声明约定的，绘本侠有权不经通知随时对相关内容，包括但不限于用户资料、发贴记录进行审查、删除，并视情节轻重对违规账号处以包括但不限于警告、账号封禁
          、设备封禁 、功能封禁 的处罚，且通知用户处理结果。
          <br />2、因违反用户声明被封禁的用户，可以自行与禾子教育科技联系。其中，被实施功能封禁的用户会在封禁期届满后自动恢复被封禁功能。被封禁用户可提交申诉，禾子教育科技将对申诉进行审查，并自行合理判断决定是否变更处罚措施。
          <br />3、用户理解并同意，禾子教育科技有权依合理判断对违反有关法律法规或本声明规定的行为进行处罚，对违法违规的任何用户采取适当的法律行动，并依据法律法规保存有关信息向有关部门报告等，用户应承担由此而产生的一切法律责任。
          <br />4、用户理解并同意，因用户违反本声明约定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，用户应当赔偿禾子教育科技与合作公司、关联公司，并使之免受损害。我们不会故意接触和搜集14岁以下儿童的个人信息。如果您觉得由于我们的疏忽，搜集了此类信息。请联系我们，以便我们能够立即获得家长的同意或删除此信息。
          <br />三、用户发布内容规范
          <br />1、本条所述内容是指用户使用服务的过程中所制作、上载、复制、发布、传播的任何内容，包括但不限于账号头像、名称等注册信息及认证资料，或文字、语音、图片、视频、图文等发送、回复或自动回复消息和相关链接页面，以及其他使用账号或本服务所产生的内容。
          <br />2、用户不得利用“绘本侠”账号或本服务制作、上载、复制、发布、传播如下法律、法规和政策禁止的内容： (1) 反对宪法所确定的基本原则的； (2) 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
          (3) 损害国家荣誉和利益的； (4) 煽动民族仇恨、民族歧视，破坏民族团结的； (5) 破坏国家宗教政策，宣扬邪教和封建迷信的； (6) 散布谣言，扰乱社会秩序，破坏社会稳定的； (7)
          散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的； (8) 侮辱或者诽谤他人，侵害他人合法权益的； (9) 含有法律、行政法规禁止的其他内容的信息。
          <br />3、用户不得利用“绘本侠”账号或本服务制作、上载、复制、发布、传播如下干扰“服务”正常运营，以及侵犯其他用户或第三方合法权益的内容： (1) 含有任何性或性暗示的； (2) 含有辱骂、恐吓、威胁内容的；
          (3) 含有骚扰、垃圾广告、恶意信息、诱骗信息的； (4) 涉及他人隐私、个人信息或资料的； (5) 侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的； (6)
          含有其他干扰本服务正常运营和侵犯其他用户或第三方合法权益内容的信息。
          <br />四、使用规则
          <br />1、用户在本服务中或通过本服务所传送、发布的任何内容并不反映或代表，也不得被视为反映或代表禾子教育科技的观点、立场或政策，禾子教育科技对此不承担任何责任。
          <br />2、用户不得利用“绘本侠”账号或本服务进行如下行为： (1) 提交、发布虚假信息，或盗用他人头像或资料，冒充、利用他人名义的； (2) 强制、诱导其他用户关注、点击链接页面或分享信息的； (3)
          虚构事实、隐瞒真相以误导、欺骗他人的； (4) 利用技术手段批量建立虚假账号的； (5) 利用“绘本侠”账号或本服务从事任何违法犯罪活动的； (6)
          制作、发布与以上行为相关的方法、工具，或对此类方法、工具进行运营或传播，无论这些行为是否为商业目的； (7) 其他违反法律法规规定、侵犯其他用户合法权益、干扰“绘本侠”正常运营或服务未明示授权的行为。
          <br />3、用户须对利用“绘本侠”账号或本服务传送信息的真实性、合法性、无害性、准确性、有效性等全权负责，与用户所传播的信息相关的任何法律责任由用户自行承担，与禾子教育科技无关。如因此给禾子教育科技或第三方造成损害的，用户应当依法予以赔偿。
          <br />4、禾子教育科技提供的服务中可能包括广告，用户同意在使用过程中显示禾子教育科技和第三方供应商、合作伙伴提供的广告。除法律法规明确规定外，用户应自行对依该广告信息进行的交易负责，
          对用户因依该广告信息进行的交易或前述广告商提供的内容而遭受的损失或损害，禾子教育科技不承担任何责任。
          <br />五、信息安全
          <br />1、绘本侠帐号均有安全保护功能，请妥善保管您的用户名及密码信息。绘本侠将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”。
          <br />2、在使用绘本侠网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是绘本侠用户名及密码发生泄露，请您立即绘本侠客服，以便绘本侠采取相应措施。
          <br />六、其他
          <br />1、禾子教育科技郑重提醒用户注意本声明中免除禾子教育科技责任和限制用户权利的条款，请用户仔细阅读，自主考虑风险。未成年人应在法定监护人的陪同下阅读本声明。
          <br />2、本声明的效力、解释及纠纷的解决，适用于中华人民共和国法律。若用户和禾子教育科技之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，用户同意将纠纷或争议提交禾子教育科技住所地有管辖权的人民法院管辖。
          <br />3、本声明的任何条款无论因何种原因无效或不具可执行性，其余条款仍有效，对双方具有约束力。
          七、APP运营者基本信息
          1、公司名称：长沙禾子教育科技有限公司
          2、注册地址：湖南省长沙市芙蓉区荷花园街道人民东路111号东郡小区3号栋102室
          3、常用办公地址：湖南省长沙市岳麓区麓谷企业广场
          4、信息保护负责人联系电话：18510163216
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      isRead: true, //是否打勾
      readShou: false //用户协议是否显示
    };
  },
  computed: {
    //登录按钮变灰
    btnStyle() {
      const background = this.isRead ? "login/进入.png" : "login/进入2.png";
      return {
        background:
          "url(" + this.variable.STATICE_URLTITLE + background + ") 0 0/100% 100%"
      };
    }
  },
  methods: {
    //点击显示用户协议
    readTouch: function () {
      this.touchMusic()
      this.readShou = true
    },
    //点击关闭用户协议
    closeTouch: function () {
      this.touchMusic()
      this.readShou = false
    },
    //点击切换阅读状态
    gouTouch: function () {
      this.touchMusic()
      this.isRead = !this.isRead
    },
    //点击进入绘本 添加缓存 跳转到绘本列表
    loginBtn: function () {
      this.touchMusic()
      if (this.isRead) {
        localStorage.setItem("isLogin", true)
        this.$router.push({ path: "/recommendList" })
      }
    }
  }
};
</script>

<style scoped lang='stylus'>
.login
  background url($urlTitle + 'login/背景.png') 0 0 / 100% 100%
  position fixed
  width 100%
  height 100%
  z-index 98
  .login_title
    background url($urlTitle + 'login/title.png') 0 0 / 100% 100%
    $coord(WHRT, 12rem, 1.2rem, 1.5rem, 1.5rem)
    transform translate(var(--X), calc(0px - var(--Y)))
  .login_read
    position absolute
    background url($urlTitle + 'login/read.png') 0 0 / 100% 100%
    $center(WHL_B, 13rem, 1rem, 3.7rem)
    filter brightness(0)
    z-index 99
  .login_gou
    $coord(WHLB, 1.2rem, 1.2rem, 50%, 3.6rem)
    border 0.1rem solid orange
    box-sizing border-box
    background-color transparent
    border-radius 50%
    margin-left -8rem
    z-index 98
    .gou
      background url($urlTitle + 'login/gou.png') 0 0 / 100% 100%
      $coord(WHLB, 1.3rem, 1.3rem, 0rem, 0.1rem)
      z-index 99
  .loginBtn
    position absolute
    $center(WHL_B, 9rem, 3.5rem, 5.5rem)
    transition all 0.5s
    z-index 99
  .loginBtn:active
    transition all 0.3s
    transform scale(1.3)
  .readBg
    background url($urlTitle + 'login/内容框.png') 0 0 / 100% 100%
    $coord(WHLT, 70%, 70%, 15%, 15%)
    z-index 99
  .read_close
    $coord(WHRT, 1.5rem, 1.5rem, 1.5rem, 1.5rem)
    background url($urlTitle + 'login/关闭按钮.png') 0 0 / 100% 100%
    z-index 99
  .read_title
    position absolute
    background url($urlTitle + 'login/隐私协议.png') 0 0 / 100% 100%
    $center(WHL_T, 20rem, 1.3rem, 1.5rem)
    z-index 99
  .read_content
    $coord(WHLT, 80%, 60%, 10%, 25%)
    overflow scroll
    z-index 99
    .read_word
      font-size 0.7rem
      line-height 1.2rem
      font-weight 500
      text-align left
      color black
</style>